<template>
    <h1>测试组件</h1>
  <h1>数组变化两种方法</h1>
  <button @:click="changeArray()">点击改变数组</button>
<ul>
    <li v-for="(item, index) in arr" key:index>{{item}}</li>
</ul>
  <button @:click="concatArray()">点击合并数组</button>
<ul>
    <li v-for="(item, index) in num1" key:index>{{item}}</li>
</ul>

<ul>
    <li v-for="(item, index) in num2" key:index>{{item}}</li>
</ul>
</template>

<script>
export default {
  data() {
    return {
      arr: ["li", "zhang", "wang"],
      num1:[1,2,3],
      num2:[4,5,6]
    };
  },
  methods: {
    changeArray() {
        this.arr.push("he");
    },
    concatArray() {
        // 一定注意，这里的concat方法并不会改变原数组，而是返回一个新的数组
        // 所以需要将原数组重新赋值给this.num1！！！
    this.num1 = this.num1.concat(this.num2);
    }

  }
}
</script>
